<script setup>
import { nextTick, onMounted, ref } from 'vue';
import { UploadFilled } from '@element-plus/icons-vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const route = useRoute();
const typesValue = ref('');
const types = ref([
  {
    value: 'phone',
    label: '手机'
  },
  {
    value: 'pad',
    label: '平板'
  },
])
const formRef = ref({
  goodId: -1,
  goodName: '',
  goodBrand: '',
  goodType: '',
  goodDesc: '',
  goodMemory: '',
  goodColor: '',
  goodImage: '',
  goodPrice: 0,
  goodDiscountPrice: 0,

})
const inputMemoryValue = ref('')
const inputColorValue = ref('')
const memoryTags = ref(['8GB+256GB'])
const colorTags = ref([])
const inputMemoryVisible = ref(false)
const inputColorVisible = ref(false)
const InputMemoryRef = ref()
const InputColorRef = ref()


const handleClose = (Tags, tag) => {
  if (Tags === 'memoryTags') {
    memoryTags.value.splice(memoryTags.value.indexOf(tag), 1)
  }
  if (Tags === 'colorTags') {
    colorTags.value.splice(colorTags.value.indexOf(tag), 1)
  }
}
const showInput = (Tags) => {
  console.log(Tags === 'memoryTags');
  if (Tags === 'memoryTags') {
    inputMemoryVisible.value = true
    nextTick(() => {
      InputMemoryRef.value.input.focus()
    })
  }
  if (Tags === 'colorTags') {
    inputColorVisible.value = true
    nextTick(() => {
      InputColorRef.value.input.focus()
    })
  }

}
const handleInputConfirm = (Tags) => {
  console.log(Tags === 'memoryTags');
  if (Tags === 'memoryTags') {
    if (inputMemoryValue.value) {
      memoryTags.value.push(inputMemoryValue.value)
    }
    inputMemoryVisible.value = false
    inputMemoryValue.value = ''
  }
  if (Tags === 'colorTags') {
    if (inputColorValue.value) {
      colorTags.value.push(inputColorValue.value)
    }
    inputColorVisible.value = false
    inputColorValue.value = ''
  }

}

// 图片上传成功时回调
const uploadSuccess = (res,uploadFile,uploadFiles)=>{
  console.log(res);
  formRef.value.goodImage=res;
  
}

// 提交表单
const submitAdd = ()=>{
  formRef.value.goodType = typesValue.value;
  formRef.value.goodMemory = memoryTags.value.join();
  formRef.value.goodColor = colorTags.value.join();
  console.log(formRef.value.goodMemory);
  var url="http://124.71.66.63:9090/good/addGood";
  if (route.query.Good_id){
    url="http://124.71.66.63:9090/good/updateGood"
  }
  axios({
        url: url,
        method: "POST",
        data: {
          Good_id: formRef.value.goodId,
          Good_name: formRef.value.goodName,
          Good_brand: formRef.value.goodBrand,
          Good_type: formRef.value.goodType,
          Good_desc: formRef.value.goodDesc,
          Good_memory: formRef.value.goodMemory,
          Good_color: formRef.value.goodColor,
          Good_image: formRef.value.goodImage,
          Good_price: formRef.value.goodPrice,
          Good_discountPrice: formRef.value.goodDiscountPrice},
          headers: { 'Content-Type':'application/x-www-form-urlencoded' }
      }).then(res => {
        if (res.data.isSuccess == true) {
          ElMessage({
            message: res.data.data,
            type: 'success',
          })
          // 将token保存到本地
          router.push('/goodlist')
        } else {
          ElMessage({
            message: res.data.errorMsg,
            type: 'error',
          })
        }
      })
      console.log('submit!')
  
  // if (!formRef) return
  // formEl.validate((valid) => {
  //   if (valid) {
  //     // 输入框验证通过 可以发起登录请求
      
  // })
}

onMounted(()=>{
  if (route.query.Good_id) {
    formRef.value.goodId = route.query.Good_id;
    formRef.value.goodName = route.query.Good_name;
    formRef.value.goodBrand = route.query.Good_brand;
    // formRef.value.goodType = route.query.Good_type;
    formRef.value.goodDesc = route.query.Good_desc;
    // formRef.value.goodMemory = route.query.Good_memory;
    // formRef.value.goodColor = route.query.Good_color;
    formRef.value.goodImage = route.query.Good_image;
    formRef.value.goodPrice = route.query.Good_price;
    formRef.value.goodDiscountPrice = route.query.Good_discountPrice;

    typesValue.value = route.query.Good_type;
    memoryTags.value=route.query.Good_memory.split(',');
    colorTags.value=route.query.Good_color.split(',');
  }
})
</script>


<template>
  <div class="add">
    <el-card class="add-container">
      <el-form ref="goodRef" label-width="100px" class="goodForm">

        <el-form-item label="名称" prop="goodName">
          <el-input style="width: 300px" v-model="formRef.goodName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="goodBrand">
          <el-input style="width: 300px" v-model="formRef.goodBrand" placeholder="品牌"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="typesValue" placeholder="分类" style="width: 300px">
            <el-option v-for="type in types" :label="type.label" :value="type.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="goodDesc">
          <el-input style="width: 300px" v-model="formRef.goodDesc" type="textarea"
            placeholder="请输入商品简介(100字)"></el-input>
        </el-form-item>
        <el-form-item label="内存规格">
          <el-tag size="large" v-for="tag in memoryTags" :key="tag" closable :disable-transitions="false"
            @close="handleClose('memoryTags', tag)">
            {{ tag }}
          </el-tag>
          <el-input v-if="inputMemoryVisible" ref="InputMemoryRef" v-model="inputMemoryValue" class="w-20"
            @keyup.enter="handleInputConfirm('memoryTags')" @blur="handleInputConfirm('memoryTags')" />
          <el-button v-else class="button-new-tag" @click="showInput('memoryTags')">
            +
          </el-button>
        </el-form-item>
        <el-form-item label="颜色规格">
          <el-tag size="large" v-for="tag in colorTags" :key="tag" closable :disable-transitions="false"
            @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input v-if="inputColorVisible" ref="InputColorRef" v-model="inputColorValue" class="w-20"
            @keyup.enter="handleInputConfirm('colorTags')" @blur="handleInputConfirm('colorTags')" />
          <el-button v-else class="button-new-tag" @click="showInput('colorTags')">
            +
          </el-button>
        </el-form-item>
        <el-form-item label="商品价格" prop="goodPrice">
          <el-input type="number" v-model="formRef.goodPrice" min="0" style="width: 300px"
            placeholder="请输入商品价格"></el-input>
        </el-form-item>
        <el-form-item label="商品售卖价" prop="goodDiscountPrice">
          <el-input type="number" v-model="formRef.goodDiscountPrice" min="0" style="width: 300px"
            placeholder="请输入商品售价"></el-input>
        </el-form-item>
        <el-form-item label="商品主图" prop="goodsCoverImg">
          <el-upload class="upload-file" drag action="http://wwww.izelinapp.top:9090/file/upload" multiple name="uploadFile" :on-success="uploadSuccess" :limit="1">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              Drop file here or <em>click to upload</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <!-- @click="submitAdd()">{{ state.id ? '立即修改' : '立即创建' }} -->
          <el-button type="primary" @click="submitAdd()">{{ formRef.goodId== -1 ? '添加':'修改' }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<style scoped>
.add {
  display: flex;
}

.add-container {
  flex: 1;
  height: 100%;
}

.avatar-uploader {
  width: 100px;
  height: 100px;
  color: #ddd;
  font-size: 30px;
}

.avatar-uploader-icon {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #e9e9e9;
  padding: 32px 17px;
}
</style>